<template>
  <el-button>axios模拟:  从后台获取： 报表模板 + 报表数据       源码：/src/views/report/XzReport1.vue</el-button><br><br>
  <el-button @click="xkprint('pdf')">导出pdf</el-button>
  <el-button @click="xkprint('print')">打印</el-button>
  <el-button @click="excelExport">导出excel</el-button>
  <el-button @click="customPrint">自定义打印</el-button>
  <el-button @click="previewPrint">打印预览</el-button>
  <el-button @click="saveData">savedata</el-button>
  <div id="queryPannel_1"></div>
</template>
<script setup>
import {onMounted} from 'vue';

import config from './config.json'
import data from './data.json'
import _onUpdateData from './onUpdateDataset_商品区域销售_商品季度销售.json'
import _onUpdateDatasetlist from './onUpdateDatasetList_商品区域销售.json'
let reportPrintData = _onUpdateData;
let spreadSheet
let reportPrint = null
const onUpdateData = (datasets, params) => {
  return new Promise((resolve, reject) =>{
    console.log('..queryPanel...onUpdateData',_onUpdateData);
    resolve(_onUpdateData)
  })
}
const onUpdateDatasetList = () => {
  return new Promise((resolve, reject) => {
    console.log('..queryPanel...onUpdateDatasetList',_onUpdateDatasetlist);

    resolve(_onUpdateDatasetlist);
  })
}
const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  onUpdateData:onUpdateData,
  onUpdateDatasetList:onUpdateDatasetList,

};
let reportPrintOptions =[
  {
    name:'查询面板1',
    print:config
  }
]

onMounted(() => {

    spreadSheet = XZReport("#queryPannel_1", option, config, data);
    //spreadSheet.update(_onUpdateData)
    reportPrint = XZReportPrint();
    reportPrint.setTemplate(reportPrintOptions);

});

function xkprint(printmode) {
  //提供了两种打印方法, 表格实例直接调用即可
//  print 方法
// option 可选值  {mode:"print"}  print:直接打印 pdf:转pdf打印
  option.mode = printmode
  spreadSheet.print({mode:"print"});

// implicitPrint 方法   参数同 pivotData 方法
// data 传入二维数组是批量数据打印
// option 可选值  {mode:"print"}  print:直接打印 pdf:转pdf打印
// spreadSheet.implicitPrint(sheetConfig,data,option?)

}

function excelExport() {

// @param {*} options {fileName: 'download', // 下载文件名 exportHideCol: true, // 是否导出隐藏的行列 exportFormula: true, // 是否导出公式

  spreadSheet.exportExcel({fileName: 'excel1', exportHideCol: true, exportFormula: true})
}

function customPrint(){
  console.log("reportPrint.getTemplate---->",reportPrint.getTemplate);
  reportPrint.print(reportPrintData);
}
function previewPrint(){
  reportPrint.previewPrint(reportPrintData);
}
function  saveData(){
  console.log(spreadSheet.datas[0].rows);

  //console.log(spreadSheet.data.rows);
}
</script>

<style scoped>

</style>
